<template>
  <div class="progress">
    <div class="progress-content">
      <div class="top_con">
        <el-steps style="width: 60%" :active="active" align-center class="steps_jd">
          <el-step title="每日菜谱" />
          <el-step title="菜谱确认" />
          <el-step title="招投标" />
          <el-step title="目测检查" />
          <el-step title="称重分拣" />
          <el-step title="物流" />
          <el-step title="学校验收" />
          <el-step title="留样" />
        </el-steps>
        <div  class="select_date">
          <el-date-picker @change="changeDate" value-format="YYYY-MM-DD" v-model="query.week" type="date" placeholder="选择一个日期" />
        </div>
        <!-- <el-select
          v-model="query.date"
          placeholder="请选择日期"
          @change="changeDate"
        >
          <el-option
            v-for="(item, index) in dateArr"
            :key="index"
            :label="item.date"
            :value="item.date"
          />
        </el-select> -->
      </div>

      <div class="content">
        <!-- <el-button type="primary" class="scFj" @click="upClickFile" v-if="active === 7">
          上传水印证明<el-icon class="el-icon--right"><Upload /></el-icon>
        </el-button> -->
        <dish v-if="active === 1" ref="refDish"></dish>
        <pass v-else-if="active === 2" ref="refPass"></pass>
        <bid v-if="active === 3" ref="refBid"></bid>
        <one v-else-if="active === 4" ref="refOne"></one>
        <two v-else-if="active === 5" ref="refTwo"></two>
        <three v-else-if="active === 6" ref="refThree"></three>
        <four v-else-if="active === 7" ref="refFour"></four>
        <retainedSample v-else-if="active === 8" ref="refRetainedSample"></retainedSample>
      </div>
      <div class="butt_butt">
        <el-button type="primary" @click="prev" v-show="active > 1">上一步</el-button>
        <el-button type="primary" @click="next" v-show="active < 8">下一步</el-button>
      </div>
    </div>

    <el-dialog title="上传附件" v-model="fileOpen" width="600px" append-to-body>
      <FileUpload v-model="dataObj.four.fileArr"></FileUpload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="fileOpen = false">取 消</el-button>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { getCodeImg, register } from "@/api/login";
import { addDateFile, editDateFile, getDateFile } from "@/api/progress";
import {parseTime} from "@/utils/ruoyi"
import bid from "./bid.vue";
import pass from "./pass.vue";
import dish from "./dish.vue";
import one from "./one.vue";
import two from "./two.vue";
import three from "./three.vue";
import four from "./four.vue";
import retainedSample from "./retainedSample.vue";
import { progress } from "./data";
import { ref } from "vue";
const fileOpen = ref(false);
const refTwo = ref(null);
const refFour = ref(null);
const refOne = ref(null);
const refDish = ref(null);
const refPass = ref(null);
const refBid = ref(null);
const refThree = ref(null);

const refRetainedSample = ref(null);
const active = ref(1);
const query = ref({
  date: "2025-09-25",
  week: "",
});
const dateArr = ref([
  { date: "2025-09-25", index: 0 },
  { date: "2025-09-24", index: 1 },
  { date: "2025-09-23", index: 2 },
  { date: "2025-09-22", index: 3 },
  { date: "2025-09-21", index: 4 },
]);
const dataObj = ref({index:1});

const changeDate = (val) => {
  query.value.date = val;
  setTimeout(() => {
    showNext();
  }, 500);
  // 切换日期后，需要更新图表数据
};

const prev = () => {
  // if (active.value-- < 1) active.value = 1;
  active.value--
  setTimeout(() => {
    showNext();
  }, 500);
};

const next = () => {
  // if (active.value++ > 3) active.value = 1;
  active.value++
  setTimeout(() => {
    showNext();
  }, 500);
};

// 上传文件点击事件
function upClickFile() {
  fileOpen.value = true;
  console.log("上传文件点击事件");
}

// 上传文件提交事件
function submitFileForm() {
  console.log(dataObj.value.four.fileArr);
  if (dataObj.value.four.id != undefined) {
    editDateFile({
      fileDate: query.value.date,
      fileUrl: dataObj.value.four.fileArr,
    }).then((res) => {
      if (res.code == 200) {
        fileOpen.value = false;
      }
    });
  } else {
    addDateFile({
      fileDate: query.value.date,
      fileUrl: dataObj.value.four.fileArr,
    }).then((res) => {
      if (res.code == 200) {
        fileOpen.value = false;
      }
    });
  }
}

function getFile() {
  getDateFile({ fileDate: query.value.date }).then((res) => {
    if (res.code == 200) {
      if (res.rows.length>0) {
       dataObj.value.four.fileArr = res.rows[0].fileUrl; 
       dataObj.value.four.id = res.rows[0].id; 
      }
      
    }
  });
}

function showNext() {
  // getFile();
  if (active.value == 1) {
    // 切换到第一个步骤时，更新图表数据
    refDish.value.updateData(
      query.value
    );
  } else if(active.value == 2){
    // 切换到第二个步骤时，更新图表数据
    refPass.value.updateChartData(
      query.value
    );
  } else if(active.value == 3){
    // 切换到第三个步骤时，更新图表数据
    refBid.value.updateData(
      query.value
    );
  } else if (active.value == 4) {
    // 切换到第四个步骤时，更新图表数据
    refOne.value.updateChartData(
      query.value
    );
  } else if (active.value == 5) {
    // console.log(dataObj.value);
    // 切换到第五个步骤时，更新图表数据
    refTwo.value.updateChartData(
      query.value
    );
  } else if (active.value == 6) {
    // console.log(dataObj.value);
    // 切换到第六个步骤时，更新图表数据
    refThree.value.updateChartData(
      query.value
    );
  } else if (active.value == 7) {
    // 切换到第七个步骤时，更新图表数据
    refFour.value.updateData(
      query.value
    );
  } else if (active.value == 8) {
    // 切换到第八个步骤时，更新图表数据
    refRetainedSample.value.updateData(
      query.value
    );
  }
}

const getInit = () => {

  dataObj.value = progress.value.find(
    (item) => item.one.date == query.value.date
  );
  dataObj.value.index = 1
  // query.value.week = parseTime(new Date(), '{y}-{m}-{d}')
  query.value.week = '2025-09-29'
  showNext();
};
onMounted(() => {
  // getInit();
});

// 暴露方法给父组件
defineExpose({
  getInit
});

</script>
<style>
  .el-step__title.is-process {
    color: var(--el-text-color-placeholder);
  }
  .el-step__head.is-process {
    color: var(--el-text-color-placeholder);
    border-color: var(--el-text-color-placeholder);
}
</style>
<style lang='scss' scoped>
.progress {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  .progress-content {
    width: 95%;
    height: 95%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    .top_con {
      display: flex;
      justify-content: center;
      align-items: center;

      .select_date {
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 110px);
      position: relative;
      .scFj {
        z-index: 101;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .butt_butt {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 10px;
      height: 40px;
    }
  }
}
</style>
